<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../favicon.ico">

    <title>春节兑奖进度查询</title>

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">



    <style>
        .input_style {
            border-radius: 0 !important;
        }
        
        .mycard {
            width: 100%;
            padding-bottom: 50%;
            /*background-image: url(../../assets/image/cards/card-query-national.jpg);*/
            /*background-image: url(../../assets/image/cards/card-query-xmas-inside.jpg); // 圣诞内图*/
            /* 圣诞内图 */
            background-image: url(../../assets/image/cards/card-query-spring2017-inside.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            /*box-shadow: 0 0 2px rgba(0, 0, 0, .10);*/
        }
        
        #footer-section {
            font-size: 10px;
            line-height: 1.5em;
            position: absolute;
            bottom: 0rem;
            width: 100%;
            margin: 0;
            text-align: center;
            color: #8c8c8c;
        }
        
        .higher-input {
            height: 1.6rem !important;
        }
        
        #result {
            font-family: Tahoma, 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
            font-size: 14px;
            width: 100%;
            /*height: 40px;*/
            margin-top: 1rem;
            padding: 1rem;
            /*text-align: center;*/
            background: #efffe3;
            border: 1px solid #6bb30c;
        }
    </style>


</head>

<body>

    <div class="page-group">
        <div class="page page-current" style="background-color: #FFF1DA;">
            <!-- 你的html代码 -->
            <div class="mycard"></div>
            <div class="content-padded" style="margin-top: 0;">

                <div class="searchbar row">
                    <div class="search-input col-80">
                        <label class="icon icon-search" for="search"></label>
                        <input id='mobile_number' type="search" placeholder='输入11位手机号码...' class="higher-input input_style" />
                    </div>
                    <a id="search" class="button button-fill button-primary col-20 higher-input" href="javascript:void(0)">查询</a>
                </div>

                <div id="result" style="display: none;"></div>
                <div id="footer-section" style="color: #f2210d;">
                    <p>Copyright © 1998 -
                        <script>
                            document.write((new Date()).getFullYear());
                        </script> Panasonic. All Rights Reserved.</p>
                    <p>松下电器（中国）有限公司 版权所有</p>
                </div>
            </div>
        </div>
    </div>

    <!-- <script src="../../assets/js/lottery/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script> -->

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
    <script src="../../assets/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../assets/js/social_share.v2.js" type="text/javascript" charset="utf-8"></script>


    <script>
        // $.init();

        document.getElementById('mobile_number').addEventListener('input', function(e) {
            var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,4})(\d{0,4})/);
            e.target.value = !x[2] ? x[1] : '' + x[1] + '-' + x[2] + (x[3] ? '-' + x[3] : '');
        });

        $("#search").click(function() {
            var mobileNumber = $("#mobile_number").val();
            if (mobileNumber == undefined || mobileNumber.length == 0) {
                $.alert("请输入手机号码");
                return;
            }

            $.showPreloader('查询中...');
            // setTimeout(function () {
            //     $.hidePreloader();
            //     $.alert("请联系松下生活沙龙官方微信", "操作失败");
            // }, 2000);

            $.ajax({
                type: 'POST',
                url: '/pana-BE-RESTful/progress/query',
                // data to be added to query string:
                data: {
                    activityName: "2017-新春兑奖",
                    mobile_number: mobileNumber
                },
                // type of data we are expecting in return:
                dataType: 'json',
                timeout: 300000,
                context: $('#result'),
                success: function(data) {
                    // Supposing this JSON payload was received:
                    //   {“project”: {“id”: 42, “html”: “<div>…” }}
                    // append the HTML to context object.
                    $.hidePreloader();
                    this.empty();
                    this.append(data.result).append("<br/>").append(data.message).show();
                },
                error: function(xhr, type) {
                    this.empty();
                    $.hidePreloader();
                    $.alert("请联系松下生活沙龙官方微信", "操作失败");
                }
            });



        });

        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/pana-BE-RESTful/wx/init',
            timeout: 300000,
            data: {
                'currentUrl': location.href.split('#')[0]
            },
            success: function(data) {
                window.myShareData = data.result;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: myShareData.appid, // 必填，公众号的唯一标识
                    timestamp: myShareData.timestamp, // 必填，生成签名的时间戳
                    nonceStr: myShareData.noncestr, // 必填，生成签名的随机串
                    signature: myShareData.signature, // 必填，签名，见附录1
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });

                wx.ready(function() {
                    wx.onMenuShareTimeline({
                        title: titleText, // 分享标题
                        link: shareUrl,
                        imgUrl: imageUlr, // 分享图标
                        success: function() {},
                        cancel: function() {}
                    });

                    wx.onMenuShareAppMessage({
                        title: titleText, // 分享标题
                        desc: descriptionText, // 分享描述
                        link: shareUrl,
                        imgUrl: imageUlr, // 分享图标
                        success: function() {},
                        cancel: function() {}
                    });
                });

                wx.error(function(res) {
                    console.log(res);
                });
            }
        });
    </script>


</body>

</html>